﻿@using Pay.DTO;
@{
    ViewBag.Title = "全部分类";
    Layout = "~/Views/Shared/_MallLayout.cshtml";
    var categoryList = ViewBag.CategoryList as List<token_category_dto>;
    var img_url = ViewBag.img_url;
    var pcategoryId = string.IsNullOrEmpty(Request["pcategoryId"]) ? 0 : long.Parse(Request["pcategoryId"].ToString());
}

<body class="page-category">

    <aside class="mainport-left">

        <ul class="categoryFirst  lt-mb">
            @*@if (categoryList != null) {
                                int i = 0;
                                foreach (var category in categoryList) {
                        <li class="@(i==0?"active":"")">@category.name <span></span></li>
                        i++;
                    }
                }*@
        </ul>
    </aside>

    <section class="mainport ">
        @*<article class="mainport-right">*@
        @*<div class="banner img-responsive"><img src="asset/dest/img/ad2.jpg" alt="" /></div>*@
        @*<div class="goods-list" id="goods-list1">
                <h3>柴米油盐</h3>
                <ul>
                    <li>
                        <a href="">
                            <figure>
                                <div class="img">
                                    <img src="asset/dest/img/ad2.jpg" alt="">
                                </div>
                                <figcaption>
                                    <div class="goods-title">
                                        金龙鱼 葵花籽清油葵花籽清油葵花籽清油
                                    </div>
                                </figcaption>
                            </figure>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <figure>
                                <div class="img">
                                    <img src="asset/dest/img/appbg.png" alt="">
                                </div>
                                <figcaption>
                                    <div class="goods-title">
                                        金龙鱼 葵花籽清油葵花籽清油葵花籽清油
                                    </div>
                                </figcaption>
                            </figure>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <figure>
                                <div class="img">
                                    <img src="asset/dest/img/appbg.png" alt="">
                                </div>
                                <figcaption>
                                    <div class="goods-title">
                                        金龙鱼 葵花籽清油葵花籽清油葵花籽清油
                                    </div>
                                </figcaption>
                            </figure>
                        </a>

                    </li>
                </ul>

                <h3>柴米油盐</h3>
                <ul>
                    <li>
                        <a href="">
                            <figure>
                                <div class="img">
                                    <img src="asset/dest/img/ad2.jpg" alt="">
                                </div>
                                <figcaption>
                                    <div class="goods-title">
                                        金龙鱼 葵花籽清油葵花籽清油葵花籽清油
                                    </div>
                                </figcaption>
                            </figure>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <figure>
                                <div class="img">
                                    <img src="asset/dest/img/appbg.png" alt="">
                                </div>
                                <figcaption>
                                    <div class="goods-title">
                                        金龙鱼 葵花籽清油葵花籽清油葵花籽清油
                                    </div>
                                </figcaption>
                            </figure>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <figure>
                                <div class="img">
                                    <img src="asset/dest/img/appbg.png" alt="">
                                </div>
                                <figcaption>
                                    <div class="goods-title">
                                        金龙鱼 葵花籽清油葵花籽清油葵花籽清油
                                    </div>
                                </figcaption>
                            </figure>
                        </a>

                    </li>
                </ul>
            </div>*@
        @*</article>*@
    </section>
    <div class="fn-center" id="loadings" >
        <div class="ui-loading"></div>
    </div>

    <script>
        $(function () {
            $("#loadings").show();
            $.get('/Category/GetCategorys', function (result) {
                $("#loadings").hide();
                if (result.result_code == 1000) {
                    var data = result.data;
                    var first = [];
                    var second = [];
                    for (var i = 0; i < data.length; i++) {
                        if (@pcategoryId > 0) {
                            if (@pcategoryId== data[i].id ) {
                                first.push('<li class="active" data-id="' + data[i].id + '">' + data[i].name + '<span></span></li>')
                                second.push('<article class="mainport-right " id="mainport' + i + '" ><div class="goods-list" >');
                            } else {
                                first.push('<li  data-id="' + data[i].id + '">' + data[i].name + '<span></span></li>')
                                second.push('<article class="mainport-right  " id="mainport' + i + '" style="display:none"><div class="goods-list" >');
                            }

                        } else {
                            if (i == 0) {
                                first.push('<li class="active" data-id="' + data[i].id + '">' + data[i].name + '<span></span></li>')
                                        second.push('<article class="mainport-right " id="mainport' + i + '" ><div class="goods-list" >');
                            } else {
                                first.push('<li  data-id="' + data[i].id + '">' + data[i].name + '<span></span></li>')
                                        second.push('<article class="mainport-right  " id="mainport' + i + '" style="display:none"><div class="goods-list" >');
                            }
                        }
                       


                        second.push('<ul>')
                        for (var n = 0; n < data[i].children.length; n++) {
                            second.push('<li><a href="/Category/CategoryProduct?categoryId=' + data[i].children[n].id + '&pcategoryId=' + data[i].id + '"><figure>');
                            second.push('<div class="img">');
                            second.push('<img src="' + '@img_url' + data[i].children[n].first_url+''+'" alt="">');
                            second.push('</div>');
                            second.push('<figcaption><div class="goods-title">');
                            second.push(data[i].children[n].name);
                            second.push('</div>  </figcaption>');
                            second.push('</figure></a></li>');
                        }
                        second.push('</ul>')
                        second.push('</div></article>');
                    }
                    $('.categoryFirst').append(first.join(''));
                    $('.mainport').append(second.join(''));
                }
            });
            var menu = $(".categoryFirst li")
            var list = $(".goods-list")

            $('.categoryFirst').delegate('li','click', function () {
                i = $(this).index();
                $(this).addClass("active").siblings().removeClass("active");
                var main = $("#mainport" + (i + ''));
                main.show().siblings().hide();
                main.find(' ul').each(function (i, item) {
                    if ($(item).children('li').length == 0) {
                        $(item).remove();
                    }
                });
                window.location.href = 'http://' +'@Request.Url.Authority'+ '/Category/CategoryList'+ '?pcategoryId=' + $(this).attr('data-id');
                //list.eq(i).fadeIn(1000).siblings().hide()
            })
        })
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
    </script>
</body>

